<template>
    <div class="main-container">
        <div class="content-box">
            <div class="banner-list">
                <img src="https://img1.dxycdn.com/2019/0307/225/3332788941924867064-22.png" class="avatar-info" />
                <div class="right-box">
                    <p class="doctor-title">导诊医生</p>
                    <div class="message-box">
                        请详细描述患者的疾病症状、患病时长、用药情况，需要我提供什么样的帮助。丁香医生为你保障隐私，病历材料仅医生可见
                    </div>
                </div>
            </div>

            <div class="divider"></div>

            <div class="input-section">
                <textarea v-model="textInput" placeholder="请详细描述你的病情" @input="handleInput" class="text-area"></textarea>
                <span class="counter">{{ textInput.length }}/500</span>
            </div>

            <div class="upload-section">
                <div class="upload-area" @click="triggerFileInput">
                    <div class="upload-box">
                        <img src="https://img1.dxycdn.com/2019/1101/756/3377141806470101131-22.png" alt="上传图片" />
                        <p>上传的病历材料仅医生可见</p>
                        <input type="file" ref="fileInput" multiple accept="image/*" @change="handleFileChange"
                            class="hidden" />
                    </div>
                </div>
                <div class="preview-grid">
                    <div v-for="(image, index) in images" :key="index" class="preview-item">
                        <img :src="image" alt="预览图" />
                        <button class="remove-btn" @click="removeImage(index)">×</button>
                    </div>
                </div>
            </div>
        </div>

        <button class="next-button" @click="goToNextPage">下一步</button>

        <!-- <p v-if="saveMessage" class="save-message">{{ saveMessage }}</p> -->

        <div class="bottom-nav">
            <div class="nav-item">
                <use xlink:href="#icon-ic_home_n"></use>
                <a href="/">首页</a>
            </div>
            <div class="nav-item">
                <use xlink:href="#icon-ic_jiankangbaike"></use>
                <a href="/">健康百科</a>
            </div>
            <div class="nav-item">
                <use xlink:href="#icon-ic_mine_n"></use>
                <a href="/">我的</a>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

// 路由和响应式变量
const router = useRouter();
const textInput = ref("");
const images = ref([]);
const fileInput = ref(null);
// const saveMessage = ref(""); // 保存提示信息
let saveTimeout = null; // 定时器引用

// 限制文本长度
const handleInput = () => {
    // 限制最多输入500个字符
    if (textInput.value.length > 500) {
        textInput.value = textInput.value.slice(0, 500);
    }

    // 如果存在未完成的保存操作，清除定时器
    if (saveTimeout) clearTimeout(saveTimeout);

    // 设置新的定时器，延迟 1 秒保存到本地存储
    saveTimeout = setTimeout(() => {
        saveToLocalStorage();
    }, 1000);
};

// 保存数据到本地存储
const saveToLocalStorage = () => {
    const dataToStore = {
        text: textInput.value,
        images: images.value, // Base64格式的图片数组
    };

    // 保存到本地存储
    localStorage.setItem("userInputData", JSON.stringify(dataToStore));
    // saveMessage.value = "已保存"; // 显示提示
    ElMessage.success("已保存");
    // 1 秒后清除提示
    // setTimeout(() => {
    //     saveMessage.value = "";
    // }, 1000);
};

// 上传图片
const triggerFileInput = () => {
    fileInput.value?.click();
};

// 添加完文件后清空选择文件
const handleFileChange = (event) => {
    const files = event.target.files;
    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        if (!file.type.startsWith("image/")) {
            console.error("Only image files are allowed.");
            continue;
        }
        const reader = new FileReader();

        reader.onload = (e) => {
            images.value.push(e.target.result);

        };
        reader.readAsDataURL(file);
        event.target.value = ""; // 清空选择文件
        
    }
    
};

// 删除图片
const removeImage = (index) => {
    images.value.splice(index, 1);
};

// 跳转到下一页
const goToNextPage = () => {
    if (textInput.value.length < 10) {
        ElMessage.warning("请输入至少10个字符");
    } else {
        saveToLocalStorage(); // 提交前再次保存数据
        router.push({ name: "Patient" }); // 替换为目标页面的路由名称
    }
};
</script>

<style scoped>
.main-container {
    max-width: 1000px;
    /* Adjust this value to control the width */
    margin: 0 auto;
    /* Center the container */
    min-height: 100vh;
    background-color: #f7f8fa;
    padding: 20px;
    padding-bottom: 70px;
    position: relative;
}

.content-box {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    max-width: 100%;
    /* Ensure it stays within the container */
}

.banner-list {
    display: flex;
    align-items: flex-start;
    padding: 16px;
}

.avatar-info {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.right-box {
    margin-left: 12px;
    flex: 1;
}

.doctor-title {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.message-box {
    margin-top: 8px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 4px;
    font-size: 14px;
    color: #666;
    position: relative;
}

.message-box::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 10px;
    border-style: solid;
    border-width: 6px 6px 6px 0;
    border-color: transparent #f8f9fa transparent transparent;
}

.divider {
    height: 1px;
    background: #eee;
    margin: 20px 0;
}

.input-section {
    position: relative;
    margin-bottom: 20px;
}

.text-area {
    width: 100%;
    height: 150px;
    padding: 12px;
    border: none;
    background: #f8f9fa;
    border-radius: 4px;
    resize: none;
    font-size: 14px;
    box-sizing: border-box;
}

.counter {
    position: absolute;
    right: 12px;
    bottom: 12px;
    font-size: 12px;
    color: #999;
}

.upload-section {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.upload-box {
    width: 100px;
    height: 100px;
    border: 1px dashed #ddd;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.upload-box img {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
}

.upload-box p {
    margin: 0;
    font-size: 12px;
    color: #999;
}

.hidden {
    display: none;
}

.preview-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.preview-item {
    position: relative;
    width: 100px;
    height: 100px;
}

.preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.remove-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.next-button {
    width: 100%;
    height: 44px;
    background: #00b578;
    color: white;
    border: none;
    border-radius: 22px;
    font-size: 16px;
    margin-top: 20px;
    cursor: pointer;
}

.next-button:active {
    background: #00a067;
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #eee;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    color: #666;
}

.nav-item img {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
}
</style>